import {App, Button, Flex, Input, Space} from "antd";
import {PlusOutlined, SyncOutlined} from "@ant-design/icons";
import {useState} from "react";
import "./TableToolbar.css";
import {useNavigate} from "react-router-dom";

interface IProps{
    /** 刷新按钮的回调 */
    refresh: () => void,
    /**
     * 搜索框的回调
     * @param value 用户输入的索引值
     */
    onSearch?: (value: string) => void,
    /**
     * 表格工具栏显示的info信心说明
     */
    infoKye?: string,
    /**
     * 表格工具栏显示的info值
     */
    infoValue?: string | number,
    /**
     * 添加按钮跳转时候携带数据
     */
    skipState?: object,
    /**
     * 添加按钮点击跳转地址
     */
    addUrl?: string
}

const {Search} = Input;
const TableToolbar = (props: IProps) => {
    const [loading, setLoading] = useState<boolean>(false);
    const navigate = useNavigate();
    const {message} = App.useApp();
    const addDataClick = async () => {
        navigate("add",{replace: false, state: props.skipState});
    }
    const refresh = async () => {
        setLoading(true);
        props.refresh()
        setTimeout(() => {
            message.success("刷新表格成功");
            setLoading(false);
        }, 1000);
    }

    return (
        <Flex style={{marginBottom: "8px"}} justify={"space-between"} align={"center"} gap={5}>
            <div className="table-toolbar-info" style={{whiteSpace: "nowrap"}}>
                <span className="table-toolbar-info-key">{props.infoKye ?? "数据量"}</span>
                <span className="table-toolbar-info-value">{props.infoValue ?? "0"}</span>
            </div>

            <Space>
                <Search width={150}
                        placeholder="input search text"
                        allowClear
                        enterButton="Search"
                        onSearch={props.onSearch}
                />
                <Button icon={<SyncOutlined spin={loading}/>} disabled={loading} onClick={refresh}>刷新</Button>
                <Button type="primary" icon={<PlusOutlined/>} onClick={addDataClick}>
                    添加数据
                </Button>
            </Space>
        </Flex>
    );
};

export default TableToolbar;